<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .my-table {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

    <script>

        window.onload = function () {
            //需求1：点击上面的的input，下面全选或者反选。
            //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。

            var topInp = document.getElementById("title");

            var tbody = document.getElementById("content");
            var botInpArr = tbody.getElementsByTagName("input");

            //绑定事件
            topInp.onclick = function () {
                //费劲版
//                for(var i=0;i<botInpArr.length;i++){
//                    if(topInp.checked === true){
//                        botInpArr[i].checked = true;
//                    }else{
//                        botInpArr[i].checked = false;
//                    }
//                }

                //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

            //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
            //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
            // checked属性值是否全部都是true，如果有一个是false，
            // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；


            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {  //每一个input都要绑定事件
                    //开闭原则（用开关来控制）
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

</head>
<body>
<div class="my-table">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="title" />
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="content">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品1</td>
            <td>木屋烧烤</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品2</td>
            <td>蒸菜馆</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品3</td>
            <td>海底捞火锅</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>菜品4</td>
            <td>面点王</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>
